<?php

require('config.php');
@include('custom.php');
require('libraries.php');

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html lang="en">
<head>
	<meta http-equiv="Content-Language" content="en" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="javascript/file_tree/images/application.png" rel="shortcut icon"/> 
	
	<title>Code Studio</title>

	<!-- jQuery -->
	<script type="text/javascript" src="javascript/jquery/jquery-1.3.1.js"></script>
	<script type="text/javascript" src="javascript/jquery/jquery-ui-personalized-1.6rc6.min.js"></script>

	<!-- jQuery Externals -->
	<script type="text/javascript" src="javascript/layout.js"></script>
	<script type="text/javascript" src="javascript/file_tree/jqueryFileTree.js"></script>
	<script type="text/javascript" src="javascript/external/hotkeys.js"></script>
	
	<!-- Code Studio -->
	<script type="text/javascript" src="javascript/CodeStudio.js"></script>
	
	<!-- Editor -->
	<script type="text/javascript" src="javascript/edit_area/edit_area_full.js"></script>

	<style type="text/css">
	@import "stylesheets/style.css";
	@import "javascript/file_tree/jqueryFileTree.css";
	@import "javascript/jquery/theme/ui.all.css";
	</style>

</head>
<body>

	<div id="ui-split-top">
	</div>
	<div id="ui-split-side" class="ui-widget ui-widget-content ui-corner-all">
		<ul class="jqueryFileTree" id="fileTree"></ul>
	</div>
	<div id="ui-split-main">
		<ul>
		</ul>
	</div>
	<div id="ui-split-bottom" class="ui-widget ui-widget-content ui-corner-all">
		
	</div>
		
<script type="text/javascript">


$(document).ready( function() {
	var $tree = $('#fileTree').fileTree({
		root: '/',
		script: 'tree.php',
		expandSpeed: 100,
		collapseSpeed: 100,
		multiFolder: true
	}, CodeStudio.File.open);
    
	var $layout = $('body').layout([
		//[{id:'#ui-split-top', width:'fill', height:24}],
		[
			{id:'#ui-split-side', width:250, height:'fill', padWidth: -12, padHeight: -8}, 
			{id:'#ui-split-main', width:'fill', height:'fill', padWidth: -8, padHeight: -8}
		],
		[{id:'#ui-split-bottom', width:'fill', height:60, padWidth: -2, padHeight: -2}]
	], {innerSpacing: 3, offsetTop: 0, autoResize: true, offsetTop: 3, offsetLeft: 3, offsetRight: 3, offsetBottom: 3});
	
	var $tabs = $('#ui-split-main').tabs({
		add: function(event, ui) {
			$tabs.tabs('select', '#' + ui.panel.id);
		}
	});
});
</script>
</body>
</html>